<template>
  <div class="chart" :id="chartId" :style="chartStyle"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  name: "chart",
  props: {
    chartId: {
      type: String,
      required: true,
    },
    chartOptions: {
      type: Object,
      required: true,
    },
    chartStyle:{
      type:Object,
      required: true
    }
  },
  methods: {
    drawLine(chartId) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(chartId));
      // 绘制图表
      myChart.setOption(this.chartOptions);
    },
  },
  mounted() {
    console.log(1);
    this.drawLine(this.chartId);
  },
};
</script>
<style scoped>
.chart {
  overflow: hidden;
  float: left;
}
</style>